<template>
  <div class="uploadButton">
    <el-popover placement="right" width="400" trigger="click" v-model="visible" >
      <div class="uploadBlock">
        <div class="uploadIcon">
          <i class="el-icon-upload2"></i>
          <span>请选择模块</span>
        </div>

        <el-row :gutter="10" type="flex" justify="space-around">
          <el-col :span="6" v-for="(m,index) in model" :key="index">
            <el-button type="warning" @click="goTo(index)">{{m.moduleName}}</el-button>
          </el-col>
        </el-row>
      </div>
      <el-button type="warning" slot="reference">投稿</el-button>
    </el-popover>
  </div>
</template>
<script>
import {getAll} from "@/api/relationship"
export default {
  data() {
    return {
      model: [],
      visible: false
    };
  },
  mounted(){ 
    getAll().then((res)=>{
      for(var i=0;i<3;i++){ 
        this.model[i]=res.data.relation[i]
      }
      
    })
  },
  methods: {
    goTo(index){ 
      this.$router.push({ 
        path:'/edit',
        query: {
          id:this.model[index].id,
          moduleName:this.model[index].moduleName
        }
      })
      this.visible=false
    }

  },
};
</script>
<style>
.uploadBlock {
  margin-top: 20px;
  margin-bottom: 20px;
}
.uploadIcon {
  width: 200px;
  height: 100px;
  margin: 10px auto;
  overflow: hidden;
  border: solid #f8be67 2px;

}

.uploadBlock .el-icon-upload2 {
    margin: 10px auto;
    width: 200px;
  height: 100px;
  float: left;
  font-weight: 900;
  font-size: 50px;
  text-align: center;
}
.el-popover .el-popper{ 
  z-index: 99;
}
</style>